<!--
  @Description: 自由拖拽
  @Author: Mr.Li
  @E-mail: 
  @Date: 5/6/2025 15:17
-->
<template>
  <div class="container">
    <!--    interact-->
    <div class="drag-container interact" :style="{ transform: `translate(${position.x}px, ${position.y}px)` }">
      <img :src="Bg" alt="" class="bg" />
      <div class="drag-content">
        <div class="user-wrapper drag-ignore">
          <img class="avatar" :src="Avatar4" alt="" />
          <div class="name">荔枝</div>
          <div class="tip">呼叫中...</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Bg from './bg.jpg';
import Avatar4 from './avatar-4.jpg';
import interact from 'interactjs';

onMounted(() => {
  initInteract();
});

const position = ref({
  x: 0,
  y: 0,
});

function initInteract() {
  interact('.interact').draggable({
    // enable inertial throwing 拖拽平滑效果
    inertia: true,
    // keep the element within the area of it's parent
    // modifiers: [
    //   interact.modifiers.restrictRect({
    //     restriction: 'parent',
    //     endOnly: true,
    //   }),
    // ],
    autoScroll: true,
    ignoreFrom: '.drag-ignore',
    listeners: {
      start(event) {},
      move(event) {
        // 拖拽的目标元素
        // const target = event.target;
        // // keep the dragged position in the data-x/data-y attributes
        // const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        // const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
        // // translate the element
        // target.style.transform = `translate(${x}px, ${y}px)`;
        // // update the posiion attributes
        // target.setAttribute('data-x', x);
        // target.setAttribute('data-y', y);

        // 避免污染dom元素，使用vue响应式变量托管
        const x = position.value.x + event.dx;
        const y = position.value.y + event.dy;
        position.value = {
          x,
          y,
        };
      },

      // call this function on every dragend event
      end(event) {},
    },
  });
}
</script>

<style scoped lang="scss">
.container {
  //border: 1px dashed black;
  //width: 100%;
  //height: 100%;
  //position: absolute;
  //top: 0;
  //left: 0;
}

.drag-container {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 660px;
  //transform: translate(-190px, -330px);
  margin-left: -190px;
  margin-top: -330px;
  border-radius: 10px;
  overflow: hidden;
  //border: 1px dashed black;
  background: #000;
}

.bg {
  position: absolute;
  filter: blur(30px);
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
  user-select: none;
  z-index: 0;
}

.drag-content {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 100;
}

.user-wrapper {
  text-align: center;
  color: white;
  position: absolute;
  top: 20%;
  left: 50%;
  margin-left: -75px;
  width: 150px;
  z-index: 2;
  //border: 1px dashed red;

  .avatar {
    width: 90px;
    height: 90px;
    border-radius: 10px;
  }

  .name {
    margin-top: 3px;
  }

  .tip {
    font-size: 13px;
    color: #888;
    margin-top: 5px;

    &.danger {
      color: #fb5151;
    }
  }
}
</style>
